<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$event = {
    
  add: function(object, name, handler) {
    if (document.all)
      object.attachEvent('on'+name, handler);
    else
      object.addEventListener(name, handler, false);
  },
  
  remove: function(object, name, handler) {
    if (document.all)
      object.detachEvent('on'+name, handler);
    else
      object.removeEventListener(name, handler, false);
  },
  
  stop: function(event, preventDefault) {
    
    if (preventDefault) { 
      if (event.preventDefault) {
        event.preventDefault();
      } else {
        event.returnValue = false;
      }
    }
    
    if (event.stopPropagation) {
      event.stopPropagation();        
    } else {
      event.cancelBubble = true;
    }
  }
    
};

dragDrop = {
  initialMouseX: undefined,
  initialMouseY: undefined,
  startX: undefined,
  startY: undefined,
  draggedObject: undefined,
  
  initElement: function (element) {
    if (typeof element == 'string')
      element = document.getElementById(element);
    element.onmousedown = dragDrop.startDragMouse;
  },
  
  startDragMouse: function (e) {
    dragDrop.startDrag(this);
    var evt = e || window.event;
    dragDrop.initialMouseX = evt.clientX;
    dragDrop.initialMouseY = evt.clientY;
    $event.add(document,'mousemove',dragDrop.dragMouse);
    $event.add(document,'mouseup',dragDrop.releaseElement);
    return false;
  },
  
  startDrag: function (obj) {
    if (dragDrop.draggedObject)
      dragDrop.releaseElement();
    dragDrop.startX = obj.offsetLeft;
    dragDrop.startY = obj.offsetTop;
    dragDrop.draggedObject = obj;
    obj.className += ' dragged';
  },
  
  dragMouse: function (e) {
    var evt = e || window.event;
    var dX = evt.clientX - dragDrop.initialMouseX;
    var dY = evt.clientY - dragDrop.initialMouseY;
    dragDrop.setPosition(dX,dY);
    return false;
  },
  
  setPosition: function (dx,dy) {
    dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
    dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
  },
  
  releaseElement: function() {
    $event.remove(document,'mousemove',dragDrop.dragMouse);
    $event.remove(document,'mouseup',dragDrop.releaseElement);
    dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
    dragDrop.draggedObject = null;
  }
};

function load() {
  dragDrop.initElement('content')
};

buffer = {
  _max: 5,
  
  _stack: null,
  _count: 0,
  _start: 0,
  _end: -1,
  
  init: function(){
    buffer._stack = new Array(buffer._max);
  },
  
  push: function(obj){
    var max = buffer._max;
    
    buffer._end = ++buffer._end % max;
    
    buffer._stack[buffer._end] = obj;

    if(buffer._count < max){
      buffer._count++;
    } else {
      buffer._start = (buffer._end+1) % max;
    }

    console.log("start=%s end=%s", buffer._start, buffer._end, buffer._stack);
  },
  
  flush: function() {
    var start = buffer._start;
    var end = buffer._end;
    var stack = buffer._stack;
    
    if(start == 0){
      if(buffer._count < buffer._max) {
        return stack.slice(0,end+1);
      } else {
        return stack;
      }
    } else {
      return stack.slice(start).concat(stack.slice(0,end+1));
    }
  }      
};

buffer.init();

</script>
<style>
#test {
  position: absolute;
  width: 400px;
  height: 400px;
  
  background: #eee;
}

#content {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #ddd;
}
</style>
</head>
<body onload="load();">

  <div id="test">
    <div id="content">Hi</div>  
  </div>


</body>
</html>